<script setup lang="ts">
import reniceImg from '@/assets/images/global/popIcon/existing_pop_points.png';
import afterImg from '@/assets/images/global/popIcon/will_input_pop.png';
import latency from '@/assets/images/global/popIcon/latency.png';
import internationalImg from '@/assets/images/global/popIcon/DIA&IPLC_pop.png';
import cloud from '@/assets/images/global/popIcon/cloud.png';
import { getCurrentInstance } from 'vue';
import type { ComponentInternalInstance } from 'vue';
const { appContext } = getCurrentInstance() as ComponentInternalInstance;

import { ref } from 'vue';
const options: string[] = [
  '现有POP点线路',
  '即将投入POP点线路',
  '金融低延时线路',
  '国际本地DIA/IPLC',
  '国际云专线',
];
const selectedItem = ref('现有POP点线路');
const mapRef: any = ref(null);
// 点击切换
const changeLineFn = (value: string) => {
  mapRef.value.changeLatLngShow(value);
  selectedItem.value = value; // 设置选中项
};

appContext.config.globalProperties.$mitt.on(
  'defaultActive',
  (value: string) => {
    selectedItem.value = value;
  }
);
</script>

<template>
  <div class="home-map">
    <div class="rectangle">
      <div class="container">
        <div
          class="content_box"
          v-for="item in options"
          :key="item"
          :class="{ active: selectedItem === item }"
          @click="changeLineFn(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="map_box">
      <!-- 调用全局地图组件 -->
      <LeafletMap ref="mapRef" />
      <div class="bottomTips">
        <div class="content">
          <img class="cloudImg_1" v-lazy="reniceImg" alt="" />
          <span class="cloudTittle">现有的POP点</span>
        </div>
        <div class="content">
          <img class="cloudImg_2" v-lazy="afterImg" alt="" />
          <span class="cloudTittle">即将投入的POP点</span>
        </div>
        <div class="content">
          <img class="cloudImg_3" v-lazy="latency" alt="" />
          <span class="cloudTittle">金融低延时</span>
        </div>
        <div class="content">
          <img class="cloudImg_4" v-lazy="internationalImg" alt="" />
          <span class="cloudTittle">国际本地DIA&IPLC</span>
        </div>
        <div class="content">
          <img class="cloudImg_5" v-lazy="cloud" alt="" />
          <span class="cloudTittle">国际云专线</span>
        </div>
      </div>
    </div>
    <img
      class="line"
      src="@/assets/images/global/design/bottom_line.png"
      alt=""
    />
  </div>
</template>

<style lang="scss" scoped>
.home-map {
  .rectangle {
    width: 100%;
    height: 98px;
    background-image: url('@/assets/images/global/design/rectangle_1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .content_box {
        margin: 0 10px;
        width: 190px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fefcfc;
        border-radius: 5px;
        font-family: 'SourceHanSansCN-Normal';
        font-size: 16px;
        letter-spacing: 0px;
        color: #091f5f;
        &:hover {
          cursor: pointer;
          background-color: #4097ef;
          color: #fff;
        }

        &.active {
          background-color: #4097ef;
          color: #fff;
        }
      }
    }
  }

  .map_box {
    position: relative;
    margin-top: -2px;
    width: 100%;
    height: 800px;

    .bottomTips {
      position: absolute;
      left: 50%;
      bottom: 6%;
      transform: translateX(-50%);
      z-index: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ffffff;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.8);
      width: 650px;
      height: 26px;

      .content {
        margin-right: 10px;
        vertical-align: middle;
        display: flex;
        align-items: center;

        .cloudTittle {
          color: #000000;
        }
        .cloudImg_1 {
          width: 18px;
          height: 18px;
          margin-right: 2px;
        }
        .cloudImg_2 {
          width: 18px;
          height: 18px;
          margin-right: 2px;
        }

        .cloudImg_3 {
          width: 18px;
          height: 18px;
          margin-left: 3px;
          margin-right: 2px;
        }

        .cloudImg_4 {
          width: 16px;
          height: 16px;
          margin-left: 4px;
          margin-right: 5px;
        }

        .cloudImg_5 {
          width: 17px;
          height: 17px;
          margin-left: 3px;
          margin-right: 4px;
        }
      }
    }
  }
  .line {
    width: 100%;
    margin-top: -14px;
  }
}

@media screen and (min-width: 1101px) and (max-width: 1200px) {
  .container {
    width: 85%;
  }
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
  .container {
    width: 95%;
  }
}

@media screen and (max-width: 1000px) {
  .container {
    width: 100%;
    flex-wrap: wrap;
    .content_box {
      height: 30px !important;
      line-height: 30px !important;
    }
  }
}
</style>
